<!doctype html>
<html>
<head>
<meta charset="utf-8">
	    <link rel="stylesheet"  href="css/miku.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0.4, user-scalable=no">
<title>月蚀萌主的个人简历</title>
	<style>
		img{width:100%;}
		body{background:url(img/background.jpg);background-repeat:repeat;height:880px;}
	
		.leftbox{width:30%;height: 640px; background:#DADADA;margin-left: 1%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
		.rightbox{width:65%;height:850px;background:#DADADA;margin-left: 2.5%;margin-top: 1%;float:left;border: 2px solid #DADADA;border-radius:0.5%;}
		
		.hand{width:40%;margin: 0 auto;padding-top: 4%;}
			
		.fontleft{font-size: 1rem;font-weight: 700;margin:0 auto;margin-top: 5%;width:15%;}   
		.fontleft2{font-size: 1rem;font-weight: 700;margin:0 auto;margin-top: 5%;width:29%;} 
		
		.leftsvg{margin-left: 1%;display: inline-block;}
		.fontleft3{display: inline-block;font-weight: 700;}
		.fontleft3{display: inline-block;font-weight: 700;}

		.box1{margin-top: 10%;margin-left: 4%;}
				.box2{margin-top: 1%;margin-left: 4%;}
		.box3{margin-top:3%;}
		
		
		.rightsvg{margin-left:1%;display: inline-block;margin-left: 2.5%;}
		.fontright{display: inline-block;font-weight:700;}
		.xianzhi1{}
		.xianzhi2{}
		.xianzhi3{}
		.xianzhi4{}
		.xianzhi5{}
		.xianzhi6{}
		.xianzhi7{}
		.box4{width:25%;height:20px;background:white;display: inline-block;animation:html 2s infinite;}
				.box5{width:25%;height:20px;background:white;display: inline-block;animation:English 4s infinite;}
				.box6{width:25%;height:20px;background:white;display: inline-block;animation:ps 3s infinite;}

		li{display: inline-block;font-size: 18px;}
		ul{display: inline-block;}
		p{padding-left: 5%;}
		
@keyframes html{
	0%{background:#45BBB6;width: 7%;}
	
	100%{background:#45BBB6;width:10%}
		}
		
		@keyframes English{
	0%{background:#45BBB6;width: 30%;}
	
	100%{background:#45BBB6;width:45%}
		}
		
		@keyframes ps{
	0%{background:#45BBB6;width: 22%;}
	
	100%{background:#45BBB6;width:30%}
		}
		
		
		
		
		@media screen and (max-width:1130px){
				.fontleft{font-size: 14px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 15%;}  
			.fontleft2{font-size: 14px;font-weight: 700;margin:0 auto;margin-top: 5%;width:35%;}  
			.fontleft3{font-size: 14px;font-weight: 700;margin:0 auto;margin-top: 5%;}
			li{font-size: 14px;}
			p{font-size: 14px;}
				@media screen and (max-width:960px){
				.fontleft{font-size: 13px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 20%;}  
						.fontleft2{font-size: 13px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 40%;} 
					.fontleft3{font-size: 13px;font-weight: 700;margin:0 auto;margin-top: 5%;}
					li{font-size: 11px;}
								p{font-size: 11px;}

					@media screen and (max-width:690px){
						
				.fontleft{font-size: 12px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 25%;} 
							.fontleft2{font-size: 12px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 45%;} 
						.fontleft3{font-size: 12px;font-weight: 700;margin:0 auto;margin-top: 5%;}
						li{font-size: 10px;}
									p{font-size: 10px;}

						@media screen and (max-width:650px){
						.leftbox{width:93%;height: 740px; background:#DADADA;margin-left: 3%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
							
						.fontleft{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 15%;} 
							.fontleft2{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 25%;} 
							.fontleft3{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;}
							li{font-size: 16px;}
										p{font-size: 16px;}

						.rightbox{width:93%;height:700px;background:#DADADA;margin-left: 2.5%;margin-top: 2%;float:left;border: 2px solid #DADADAe;border-radius:0.5%;}
							
							
							@media screen and (max-width:620px){
									.leftbox{width:93%;height: 720px; background:#DADADA;margin-left: 3%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
								p{font-size: 14px;}
								
								
							@media screen and (max-width:500px){
						.leftbox{width:93%;height: 630px; background:#DADADA;margin-left: 3%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
							
							@media screen and (max-width:500px){
								.fontleft{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 20%;} 
	   .fontleft2{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 38%;} 
			.fontleft3{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;}
								li{font-size: 16px;}
											p{font-size: 16px;}

					}				
	
		
							
							
	</style>
</head>

	
<body>
	<div class="leftbox">
 <div class="hand"><img src="img/hand.png" alt="hand"></div>
	<div class="fontleft">陈健俊</div>
		<div  class="fontleft2">中大南方学生</div>
		
		<div class="box1">
		<div class="leftsvg"><img src="img/wo.svg" alt="hand"  ></div>
		<div class="fontleft3">基本信息:</div></div>
		<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#987cb9 SIZE=1>
			<ul>
			<li>个人信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;陈健俊/男/18岁/</li>
				<li>专业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数字媒体技术</li>
				<li>爱好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;画画/手游/看书</li>
			</ul>
			
			<div class="box2">
		<div class="leftsvg"><img src= "img/dianhua.svg" alt="phone"  ></div>
		<div class="fontleft3">联系方式:</div></div>
					<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#987cb9 SIZE=1>
						<ul>
			    <li>手机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13071447331</li>
				<li>邮箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sora@163.com</li>
				<li>QQ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1209152757</li>
			</ul>

		
	</div>

	
	<div class="rightbox">
			<div class="box3">
		<div class="rightsvg"><img src="img/jineng.svg" alt="jineng"></div>
		<div class="fontright">个人技能：</div>
  <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="95%" color=#987cb9 SIZE=1>
	  
	  
<div class="xianzhi1">	  
<ul>
	  <li>•HTML</li>
	  </ul>
	  <div class="box4"></div>		</div>	
	  
	  
	  <div class="xianzhi2">	  
<ul>
	  <li>•英语词汇</li>
	  </ul>
	  <div class="box5"></div>		</div>	
	  
	  
	    <div class="xianzhi3">	  
<ul>
	  <li>•PS</li>
	  </ul>
	  <div class="box6"></div>		</div>	
	  
	  
	  
	  
		<div class="rightsvg"><img src= "img/daxue.svg" alt="daxue"></div>
		<div class="fontright">教育经历：</div>	
	  <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="95%" color=#987cb9 SIZE=1>
		
		  <div class="xianzhi4">
			  
			  <p>•小学-天马小学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2005.9-2011.6</font></p>
	  
	  
				  <p>•中学-梁启超纪念中学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2012.9-2018.6</font></p>
		
		
		
				  <p>•大学-中山大学南方学院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;目前就读</font></p>
			  
	  
			   </div>
	
	<div class="rightsvg"><img src= "img/wenjianbao.svg" alt="work"></div>
		<div class="fontright">工作经历：</div>	
	  <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="95%" color=#987cb9 SIZE=1>
		  	
		  <div class="xianzhi5">
		  <p>•参与2018年连州国际摄影年展布展活动&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2018.11-2018.12</p>
		  <p>•参与树莓工坊定格动画制作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2018.11-2019.5</p>
		  <p>•参与2.5D动画《童忆》制作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2019.2-2019.5</p>
		 

		  </div>	
		
		<div class="rightsvg"><img src="img/gerenxiangmu.svg" alt="xiangmu"></div>
		<div class="fontright">个人项目：</div>	
	  <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="95%" color=#987cb9 SIZE=1>  
		  
		  <div class="xianzhi6">
			   <p>•数字化校园智能信息匹配查询系统开发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2019.4-2020</p>
		  
		  </div>
		  
		  
		  <div class="rightsvg"><img src="img/ziwopingjia.svg" alt="me"></div>
		<div class="fontright">自我评价/期望：</div>	
	  <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="95%" color=#987cb9 SIZE=1>  
		  
		  <div class="xianzhi7">
			  <p>•热爱读书，对诗歌有独特见解；基本熟练使用三维软件建模，曾参与过动画项目建模；有一定的PS基础知识；希望在2年内熟练掌握前端开发知识，能熟练使用各种主流框架；</p>
			  
			  
			  
		  </div>
		
		
			
			
			</div>
		</div>

</body>
</html>
